<template>
	<vCommonPage type="1" :title="$route.query.title">
		<div slot="customContent" class="content jgcx">
			<div class="centerBox">
				<div class="centerTopBox">
					<div class="title">
						尊敬的先生/女士：
					</div>
					<div class="centerText">
						您好！首先非常感谢您对我们这次调查的帮助与支持！
						本问卷的目的在于了解您对门诊药房工作的满意程度,所有数据仅用于工作改进，
						您的意见对我院就医服务的改进有非常重要的作用，希望能得到您的帮助。
						本次调查会耽搁您一分钟左右的时间，请您谅解，对您的大力配合与支持我们再一次表示衷心的感谢！
					</div>
				</div>
				<div class="questionBox" v-for="(item,index) in questionList">
					<div class="questionTitle">
						{{index+1}}.{{item.questionTitle}}
					</div>
					<div class="questionBoxItemBox">
						<div class="questionContent" v-for="(quesItem,quesIndex) in item.value"
							@click="questClick(quesItem,quesIndex,index)">
							<img v-if="!quesItem.isClick" class="choseImg"
								src="../../assets/images/myddc/weixuanzhong.png" />
							<img v-if="quesItem.isClick" class="choseImg"
								src="../../assets/images/myddc/xuanzhong.png" />
							<div class="choseName">{{quesItem.name}}</div>
						</div>
					</div>
				</div>
			</div>
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-if="tipText" class="yiny" @click="closeYinying()"></div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button type="success" class="BtnTextGreen" style="margin-left:560px !important;" @click="submit()">提交
				</el-button>
			</div>
		</div>
	</vCommonPage>
</template>

<script>
	import {
		getPaper,
		submit
	} from "@api/apiBox/myddc";
	export default {
		props: [],
		data() {
			return {
				questionList: [],
				tipText: '',
				isSucces : false,
				id:''
			}
		},
		methods: {
			//quesItem 子问题
			//quesIndex 子问题下标
			//index 大问题下标
			questClick(quesItem, quesIndex, index) {
				if (this.questionList[index].value[quesIndex].isClick) {
					this.questionList[index].value[quesIndex].isClick = !this.questionList[index].value[quesIndex].isClick;
				} else {
					this.clearAllClick(index);
					this.questionList[index].value[quesIndex].isClick = true;
				}

			},
			clearAllClick(index) {
				for (let item of this.questionList[index].value) {
					item.isClick = false;
				}
			},
			async fetchQuestion() {
				const _this = this
				let data = {
					data: {
						templateId: _this.id,
						hospitalId: this.$store.state.terminfo.hospId //医院ID
					},
					that: _this
				};
				const res = await getPaper(data);
				console.log(res)
				_this.questionList = [];
				for (let item of res.data) {
					if (item.questionType == 1) {
						let list = [];
						list = item;
						list.value = [];
						let json = JSON.parse(item.questionOptions);
						for (let questionValueListItem of json) {
							list.value.push({
								name: questionValueListItem,
								isClick: false
							})
						}
						_this.questionList.push(list);
					}
				}
				// for (let item of _this.questionList) {
				// 	console.log(item,item)
				// 		item.value[0].isClick = true;
				// }
				console.log(_this.questionList, '_this.questionList')
			},
			async submit() {
				let _this = this;
				//判断必填项目是否全部必填
				if (this.checkAnswer()) {
					let data = {
						data: {
							answerItems: [],
							templateId: _this.id,
							hospitalId: this.$store.state.terminfo.hospId //医院ID
						},
						that: _this
					}
					let answerList = [];
					for (let item of this.questionList) {
						let list = {
							questionId: item.id,
							isRequired: item.isRequired,
							hospitalId: this.$store.state.terminfo.hospId, //医院ID
							value: ""
						};
						let valueList = [];
						for (let itemValue of item.value) {
							if (itemValue.isClick) {
								valueList.push(itemValue.name)
							}
						}
						list.value = valueList.toString();
						answerList.push(list)
					}
					data.data.answerItems = answerList;
					const res = await submit(data);
					console.log(res)
					_this.tipText = "提交成功!";
					_this.isSucces = true;
					_this.$goBackHome3s(3000);
				}
			},
			checkAnswer() {
				let index = 1;
				for (let item of this.questionList) {
					console.log(item)
					if (item.isRequired == 1) {
						let isClick = false;
						for (let itemValue of item.value) {
							if (itemValue.isClick) {
								isClick = true;
							}
						}
						if (!isClick) {
							this.tipText = '第' + index + '项为必填项！';
							return false;
						}
					}
					index++;
				}
				return true;
			},
			closeYinying() {
				this.tipText = "";
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.fetchQuestion();
		}
	}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
	.centerBox {
		margin-top: 20px;
		margin-left: 13px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		padding: 44px;
		width: 924px;
		height: 573px;
		overflow: auto;

		.centerTopBox {
			margin-bottom: 30px;

			.title {
				font-size: 28px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
			}

			.centerText {
				text-indent: 2em;
				font-size: 28px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #435C7A;
			}
		}

		.questionBox {
			.questionTitle {
				font-size: 30px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #435C7A;
				margin-bottom: 30px;
				margin-top: 30px;
			}

			.questionBoxItemBox {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
			}

			.questionContent {
				display: flex;
				margin-left: 30px;
				margin-right: 50px;
				margin-top: 15px;
				margin-bottom: 10px;
				justify-content: center;
				align-items: center;

				.choseName {
					font-size: 28px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #435C7A;
				}

				.choseImg {
					width: 27px;
					height: 27px;
					margin-right: 15px;
				}
			}
		}

		.sumbitBox {
			width: 100%;
			margin-top: 20px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
